<template>
	<view class="page-container">
		<!-- #ifndef MP-TOUTIAO || H5 -->
		<view class="top-fixed" :class="{show:scrollTop > 0}" :style="{height: stickyHeight + 'px'}">
			<view class="navigation-title-bar">{{cfgCenterTitle}}</view>
		</view>
		<!-- 自定义头部 -->
		<!-- #endif -->
		
		<view class="ucenter-info-block">
						
			<view class="user-info-area">
				
				<view class="user-info-area__hd" v-if="cfg_weixin_personal_info" @click="userAccount">
					<image class="img" :src="isLogin ? userInfo.litpic : 'https://static.member.stourweb.cn/uniapp/static/images/' + 'default_header_img.png'" mode="aspectFill"></image>
				</view>
				
				<view class="user-info-area__bd">
					<block v-if="!isLogin">
						<!-- #ifdef H5 || APP-PLUS -->
						<view class="login-btn" @click="login">登录或注册</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button class="login-btn" type="default" @click="loginGetUserInfo">登录或注册</button>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<button class="login-btn" type="default" @click="loginGetUserInfo" data-eventsync="true">抖音登录或注册</button>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<button class="login-btn" type="default" open-type="getAuthorize" @getAuthorize="loginGetUserInfo" scope="userInfo">登录或注册</button>
						<!-- #endif -->
					</block>
					<block v-else>
						<view class="data">
							<view class="name">{{userInfo.nickname}}</view>
							<view class="club" v-if="userInfo.rank_name">{{userInfo.rank_name}}</view>
						</view>
						<view class="phone">{{userInfo.mobile}}</view>
					</block>
				</view>
			</view>
			<!-- 用户信息 -->
			
			<view class="ucenter-info-right">
				<view class="settings iconfont" @click="jumpSetting">&#xe613;</view>
				<view class="message iconfont" @click="jumpMessage"><text class="point" v-if="statistics.message > 0"></text>&#xe614;</view>
				<view class="signin iconfont" v-if="checkAppInstall('member_sign')" @click="jumpSign">&#xe612;</view>
			</view>
			<!-- 快捷按钮 -->
			
			<view class="ucenter-integral-task" v-if="!checkAppInstall('integral_award') && !checkAppInstall('system_integral')" @click="jumpTask"><text class="iconfont">&#xe618;</text>赚取积分</view>
			<!-- 快捷按钮-赚积分 -->
			
		</view>
		<!-- 用户基本信息 -->
		
		<view class="ucenter-main-wrapper">
			
			<view class="member-info-block">
				<view class="member-info-top">
					<view class="member-top-hd">
						<view class="member-level-name" v-if="isLogin && currentRank.current"><text class="level">LV{{currentRank.current}}</text>{{currentRank.name}}</view>
						<view class="member-level-explain" v-if="isLogin" @click="myBenefits(currentRank.current)">
							<block v-if="gradeNext.diff_info">{{gradeNext.diff_info}}<text class="iconfont">&#xe67f;</text></block>
						</view>
						<view class="member-level-explain tips" v-else>登录后可查看会员权益</view>
					</view>
					<view class="member-top-bd">
						<view class="mtop-bd-item" @click="myBenefits(currentRank.current)">
							<view class="num">{{isLogin ? statistics.equity_num : 0}}</view>
							<view class="txt">我的权益</view>
						</view>
						<view class="mtop-bd-item" @click="myCredit">
							<view class="num">{{isLogin ? statistics.jifen : 0}}</view>
							<view class="txt">我的积分</view>
						</view>
						<view class="mtop-bd-item" @click="myWallet">
							<view class="num">{{isLogin ? statistics.total_balance : 0}}</view>
							<view class="txt">我的钱包</view>
						</view>
					</view>
				</view>
				<view class="member-info-bottom" v-if="checkAppInstall('integral_award') || checkAppInstall('system_integral')">
					<view class="member-bottom-item lottery" v-if="checkAppInstall('integral_award')" @click="jumpLottery">
						<view class="title"><view class="iconfont">&#xe615;</view>积分抽奖</view>
						<view class="text">试试手气<text class="iconfont">&#xe67f;</text></view>
					</view>
					<view class="member-bottom-item mall" v-if="checkAppInstall('system_integral')" @click="jumpMall">
						<view class="title"><view class="iconfont">&#xe617;</view>积分商城</view>
						<view class="text">立即进入<text class="iconfont">&#xe67f;</text></view>
					</view>
					<view class="member-bottom-item task" @click="jumpTask">
						<view class="title"><view class="iconfont">&#xe618;</view>赚积分</view>
						<view class="text">立即进入<text class="iconfont">&#xe67f;</text></view>
					</view>
				</view>
			
				<view class="app-menu-bar" v-if="isLeastOne && cfg_weixin_personal_info">
					<block v-if="isAllInstall">
						<view class="app-menu-bar__item litle" @click="memberCardList">
							<view class="icon"><view class="bg mcard"></view><view class="name">旅游卡</view></view>
							<view class="info">
								<view class="num">{{isLogin && statistics.card_num ? statistics.card_num : 0}}张<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>
						<view class="app-menu-bar__item litle" @click="myCoupon">
							<view class="icon"><view class="bg coupon"></view><view class="name">优惠券</view></view>
							<view class="info">
								<view class="num">{{isLogin && statistics.coupon ? statistics.coupon : 0}}张<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>
						<view class="app-menu-bar__item litle" @click="myRedEnvelope">
							<view class="icon"><view class="bg redbag"></view><view class="name">红包</view></view>
							<view class="info">
								<view class="num">{{isLogin && statistics.red_envelope ? statistics.red_envelope : 0}}个<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>
						<view class="app-menu-bar__item litle" @click="myPack">
							<view class="icon"><view class="bg pack"></view><view class="name">屯券</view></view>
							<view class="info">
								<view class="num">0张<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>			
					</block>
					<block v-else>
						<view class="app-menu-bar__item" v-if="checkAppInstall('system_card')" @click="memberCardList">
							<view class="icon"><view class="bg mcard"></view></view>
							<view class="info">
								<view class="name">旅游卡</view>
								<view class="num">{{isLogin && statistics.card_num ? statistics.card_num : 0}}张<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>
						<view class="app-menu-bar__item" v-if="checkAppInstall('coupon')" @click="myCoupon">
							<view class="icon"><view class="bg coupon"></view></view>
							<view class="info">
								<view class="name">优惠券</view>
								<view class="num">{{isLogin && statistics.coupon ? statistics.coupon : 0}}张<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>
						<view class="app-menu-bar__item" v-if="checkAppInstall('red_envelope')" @click="myRedEnvelope">
							<view class="icon"><view class="bg redbag"></view></view>
							<view class="info">
								<view class="name">红包</view>
								<view class="num">{{isLogin && statistics.red_envelope ? statistics.red_envelope : 0}}个<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>
						<view class="app-menu-bar__item" v-if="checkAppInstall('system_pack')" @click="myPack">
							<view class="icon"><view class="bg pack"></view></view>
							<view class="info">
								<view class="name">屯券</view>
								<view class="num">0张<text class="iconfont">&#xe67f;</text></view>
							</view>
						</view>
					</block>
				</view>	
				<!-- 会员卡、红包、优惠券、酒店屯券 -->
			</view>
			<!-- 会员数据 -->
					
			<view class="module-view-block">
				<view class="module-title-bar">
					<view class="title">我的订单</view>
					<view class="more" @click="jumpOrderList(-1)">全部订单<text class="iconfont">&#xe67f;</text></view>
				</view>
				<view class="order-state-group">
					<view class="item" @click="jumpOrderList(0)">
						<view class="icon unconfirmed"></view>
						<view class="name">待确认</view>
						<view class="point" v-if="statistics.status_0 > 0">{{statistics.status_0}}</view>
					</view>
					<view class="item" @click="jumpOrderList(1)">
						<view class="icon unpaid"></view>
						<view class="name">待付款</view>
						<view class="point" v-if="statistics.status_1 > 0">{{statistics.status_1}}</view>
					</view>
					<view class="item" @click="jumpOrderList(2)">
						<view class="icon unconsumed"></view>
						<view class="name">待消费</view>
						<view class="point" v-if="statistics.status_2 > 0">{{statistics.status_2}}</view>
					</view>
					<view class="item" @click="jumpOrderList(5)">
						<view class="icon uncommented"></view>
						<view class="name">待点评</view>
						<view class="point" v-if="statistics.wait_comment > 0">{{statistics.wait_comment}}</view>
					</view>
					<view class="item" @click="jumpOrderList(6)">
						<view class="icon refund"></view>
						<view class="name">退款单</view>
						<view class="point" v-if="statistics.status_6 > 0">{{statistics.status_6}}</view>
					</view>
				</view>
			</view>
			<!-- 我的订单 -->
			
			<view class="module-view-block" v-if="show_fenxiao && checkAppInstall('mobiledistribution')">
				<view class="module-title-bar">
					<view class="title">分销商</view>
				</view>
				<view class="distributor-entry-area">
					<image class="hd" src="https://static.member.stourweb.cn/uniapp/static/images/cms-uni-fxs-icon.png" mode="scaleToFill"></image>
					<view class="bd">
						<text class="tit">移动裂变分销</text>
						<text class="sub">邀请您一起加入，赚取<text class="tips">海量佣金</text></text>
					</view>
					<view class="fd" @click="distributionPage">
						<text class="btn" v-if="!distribution || distribution.status != 1">立即加入</text>
						<text class="btn" v-else>分销商中心</text>
					</view>
				</view>
			</view>
			<!-- 分销商 -->
			
			<view class="module-view-block" v-if="checkAppInstall('system_guide') && isGuider && isLogin">
				<view class="module-title-bar">
					<view class="title">导游中心</view>
				</view>
				<view class="guide-entry-area">
					<image class="hd" src="https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-guide-icon.png" mode="scaleToFill"></image>
					<view class="bd">
						<text class="tit">导游中心</text>
						<text class="sub">查看专属二维码</text>
					</view>
					<view class="fd" @click="guideCenterPage">
						<text class="btn">立即查看</text>
					</view>
				</view>
			</view>
			<!-- 导游中心 -->
			
			<!-- #ifdef MP-WEIXIN || MP-ALIPAY || H5 -->
			<view class="module-view-block" v-if="cfg_weixin_personal_info">
				<view class="module-title-bar">
					<view class="title">常用功能</view>
				</view>
				<view class="tools-view-group">
					<view v-if="checkAppInstall('together')" class="tools-view-group__item" @click="goPinTuan">
						<text class="icon ping"></text>
						<text class="name">我的拼团</text>
					</view>
					<view v-if="checkAppInstall('system_notes')" class="tools-view-group__item" @click="goNotes">
						<text class="icon note"></text>
						<text class="name">我的游记</text>
					</view>
					<!-- <view v-if="checkAppInstall('system_jieban')" class="tools-view-group__item">
						<text class="icon jieban"></text>
						<text class="name">我的结伴</text>
					</view> -->
					<view class="tools-view-group__item" @click="goCollect">
						<text class="icon collected"></text>
						<text class="name">我的收藏</text>
					</view>
					
					<view class="tools-view-group__item" @click="goQuestion">
						<text class="icon qustion"></text>
						<text class="name">我的咨询</text>
					</view>
					
					<view class="tools-view-group__item" @click="guestManage">
						<text class="icon tour"></text>
						<text class="name">常用旅客</text>
					</view>
					<view class="tools-view-group__item" @click="addressList">
						<text class="icon address"></text>
						<text class="name">常用地址</text>
					</view>
					<view class="tools-view-group__item" @click="invoiceList">
						<text class="icon invoice"></text>
						<text class="name">常用发票</text>
					</view>
					<view class="tools-view-group__item">
						<st-contact :contactType="2"></st-contact>
					</view>
					<view class="tools-view-group__item" @click="realName">
						<text class="icon realname"></text>
						<text class="name">实名认证</text>
					</view>
					<view class="tools-view-group__item" v-if="checkAppInstall('system_guide') && !isGuider" @click="realguide">
						<text class="icon guide"></text>
						<text class="name">导游认证</text>
					</view>
					<view class="tools-view-group__item" v-if="checkAppInstall('integral_award')" @click="mallOrderList">
						<text class="icon award"></text>
						<text class="name">积分兑换</text>
					</view>
				</view>
			</view>
			<!-- #endif -->
				
			<!-- #ifdef MP-TOUTIAO -->
			<view class="module-view-block">
				<view class="module-title-bar">
					<view class="title">客户服务</view>
				</view>
				<view class="tools-view-group">
					<view class="tools-view-group__item">				
						<button
						 class="toutiao-btn"
						  open-type="im"
						  :data-im-id="imId"
						  bindim="imCallback"
						  binderror="onimError"
						>
						</button>
						<text class="icon seek"></text>
						<text class="name">联系客服</text>
					</view>
					<view class="tools-view-group__item" @click="viewPic">
						<text class="icon toutiao"></text>
						<text class="name">服务资质</text>
					</view>
				</view>
			</view>
			<!-- #endif -->
						
		</view>
		<!-- 功能区 -->
		
		<st-customize-footer></st-customize-footer>
		<!-- 底部导航 -->
		
	</view>
</template>

<script>
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import {check_app_install} from '@/utils/utils.js'
	import stContact from "@/components/st-contact.vue"
	import stCustomizeFooter from "@/components/st-customize-footer.vue";
	export default {
	    components: {
			uniList,
			uniListItem,
			stContact,
			stCustomizeFooter
		},
		data() {
			return {
				// 自定义头部
				scrollTop: 0,
				cfgCenterTitle:'个人中心',
				stickyHeight: 120,//默认120
				memberInfo:{},//用户等级信息
				gradeNext:{},//升级下一等级信息
				currentRank:{},
				isLogin: false,
				userInfo: {},
				statistics: {},
				distribution:false,
				show_fenxiao:false,
				cfg_weixin_personal_note_lock:0,
				cfg_weixin_personal_info:0,
				isGuider: false,
				cfg_question_is_show:0,
				touTiaoConfig:{},
				imId:'',
				isRealname: false,
			}
		},
		computed: {
			isLeastOne(){ // 旅游卡、优惠券、红包、团券是否购买其中一项
				let isOne = false;
				if(
					this.checkAppInstall('system_card') 
					|| this.checkAppInstall('coupon') 
					|| this.checkAppInstall('red_envelope') 
					|| this.checkAppInstall('system_pack') 
				){
					isOne = true
				}
				return isOne
			},
			isAllInstall(){ // 旅游卡、优惠券、红包、团券是否全部安装
				let isAll = false;
				if(
					this.checkAppInstall('system_card') 
					&& this.checkAppInstall('coupon') 
					&& this.checkAppInstall('red_envelope') 
					&& this.checkAppInstall('system_pack') 
				){
					isAll = true
				}
				return isAll
			}
		},
		onLoad() {

			//获取导航栏，状态栏高度
			this.stickyHeight = getApp().globalData.stickyHeight;
			
			//#ifdef MP-TOUTIAO
			this.getTouTiaoConfig();
			//#endif
			
			// 分销
			this.is_show_fenxiao();
			
		},
		onShow() {
			
			//用户信息
			this.setUserInfo();
			
			//是否隐藏敏感信息
			this.getPersonal();
			
			// // 分销
			// this.is_show_fenxiao();
			
			// //用户等级信息
			// this.getMemberInfo();
			
			// // 基础配置信息
			// this.getStatistics();
			
		},
		watch:{
			//登录状态
			isLogin(newVal, oldVal){
				if(newVal != oldVal){
					this.setUserInfo();
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.setUserInfo();
				uni.stopPullDownRefresh();
			},1500)
		},
		methods: {
			
			// #ifdef MP-TOUTIAO
			// 抖音客服和服务资质
			async getTouTiaoConfig(){
				let params = {
					method: "api/v2/toutiao/config/index"
				}
				let res = await this.$http(params);
				if(res.status){
					this.touTiaoConfig = res.data;
					this.imId = res.data.cfg_toutiao_customer_id;
				}else{
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			
			// 查看资质大图
			viewPic(){
				uni.setStorageSync('flair',this.touTiaoConfig.cfg_toutiao_service_certificate);
				uni.navigateTo({
					url:'../ubase/flair'
				})
			},
			imCallback(e) {},
			onimError(e) {},
			//#endif
			
			//是否隐藏敏感信息
			getPersonal(){
				// 小程序提审
				//#ifndef MP-WEIXIN
				this.cfg_weixin_personal_info = 1
				//#endif
				
				//#ifdef MP-WEIXIN
				this.cfg_weixin_personal_info = parseInt(uni.getStorageSync('cfg_weixin_personal_info'));
				//#endif
			},
			
			// 是否展示分销
			async is_show_fenxiao(){
				
				let params, staRes, app_type;
				
				//#ifdef H5
				app_type="h5"
				//#endif
				
				//#ifdef MP-TOUTIAO
				app_type="douyin"
				//#endif
				
				//#ifdef MP-WEIXIN
				app_type="wx"
				//#endif
								
				params = {
					method: "api/v2/index/is_show_distribute",
					app_type:app_type
				}
				staRes = await this.$http(params);
				if(staRes.status){
					this.show_fenxiao = staRes.data.is_show;
				}
			},
						
			// h5、app登录
			login(){
				
				let url;
				// #ifdef H5
				url = '/platforms/h5/login/phone'
				// #endif
				
				// #ifdef APP-PLUS
				url = '/platforms/app-plus/login/phone'
				// #endif
				
				uni.navigateTo({
					url: url
				})
			},
			
			// 小程序授权登录
			loginGetUserInfo(){
				this.$toPath('/pages/ucenter/index',this)
			},
		
			// 编辑个人资料
			userAccount(){
				let url;
				// #ifdef H5
				url = '/platforms/h5/user/account'
				// #endif
				
				// #ifdef MP-WEIXIN
				url = '/platforms/mp-weixin/user/account'
				// #endif
				
				// #ifdef MP-TOUTIAO
				url = '/platforms/mp-toutiao/user/account'
				// #endif
				
				// #ifdef MP-ALIPAY
				url = '/platforms/mp-alipay/user/account'
				// #endif
				
				// #ifdef APP-PLUS
				url = '/platforms/app-plus/user/account'
				// #endif
				
				this.$toPath(url, this, false);
			},	
			
			// 设置用户信息
			async setUserInfo(){
				let token = uni.getStorageSync('token');
				if(token){
					// 更新用户信息
					this.getUserInfo();
				}
				else
				{
					this.isLogin = false;
					this.userInfo = {};
					this.statistics= {};
					this.memberInfo = {};
					this.gradeNext = {};
					this.currentRank = {};
					this.distribution=false;
					this.$store.commit('logout');
				}
			},
			
			// 更新用户信息
			async getUserInfo(){
				let params = {
					method: "api/v2/member/info/show"
				};
				let res = await this.$http(params)
				if( res.status ){
					// 设置用户信息
					this.userInfo = res.data;
					
					if(res.data.verifystatus == 2){
						this.isRealname = true
					}
										
					this.isLogin = this.$store.state.hasLogin;
					//更新缓存
					uni.setStorageSync('userInfo', res.data);
					
					//用户等级信息
					this.getMemberInfo();
					
					// 基础配置信息
					this.getStatistics();
										
					// 判断是否是分销商
					if(this.checkAppInstall('mobiledistribution')){
						this.checkDistribution();
					}
					
					// 判断是否导游
					if(this.checkAppInstall('system_guide')){
						this.checkIsGuide();
					}
				}else{
					this.isLogin = false;
					this.userInfo = {};
					this.statistics= {};
					this.memberInfo = {};
					this.gradeNext = {};
					this.currentRank = {};
					this.distribution=false;
					this.$store.commit('logout');
				}
			},
			
			// 统计信息
			async getStatistics(){
				let params, staRes;
				params = {
					method: "api/v2/member/info/statistic"
				}
				staRes = await this.$http(params);
				if(staRes.status){
					this.statistics = staRes.data;
				}else{
					uni.showToast({
						title: staRes.msg,
						icon: "none"
					})
				}
			},
			
			// 获取用户等级信息
			async getMemberInfo(){
				let params, infoRes;
				params = {
					method: "api/v2/integral_integral/integral_rank"
				}
				infoRes = await this.$http(params);
				if(infoRes.status){
					this.memberInfo = infoRes.data.member;
					this.currentRank = this.memberInfo.currentRank;
					this.gradeNext = infoRes.data.next;
				}else{
					uni.showToast({
						title: infoRes.msg,
						icon: "none"
					})
				}
			},
			
			// 检查用户是否是导游
			async checkIsGuide(){
				let infoRes, params = {
					method: 'api/v2/member/guide/is_guide'
				}
				infoRes = await this.$http(params);
				if(infoRes.status){
					if(infoRes.data.is_guide == 1){
						this.isGuider = true
					}else{
						this.isGuider = false
					}
					
				}
			},
						
			// 检查用户是否是分销商
			async checkDistribution(){
				let params = {
					method:'api/v2/distributor/get_isfenxiao'
				};
				let res = await this.$http(params);
				if(res.status)
				{
					this.distribution = res.data;
				}
			},
			
			// 检查app是否安装
			checkAppInstall(appname){
				return check_app_install(appname);
			},
			
			// 跳转设置页面
			jumpSetting(){
				let url;
				// #ifdef H5
				url = '/platforms/h5/user/settings'
				// #endif
				
				// #ifdef MP-WEIXIN
				url = '/platforms/mp-weixin/user/settings'
				// #endif
				
				// #ifdef MP-TOUTIAO
				url = '/platforms/mp-toutiao/user/settings'
				// #endif
				
				// #ifdef MP-ALIPAY
				url = '/platforms/mp-alipay/user/settings'
				// #endif
				
				// #ifdef APP-PLUS
				url = '/platforms/app-plus/user/settings'
				// #endif
				
				this.$toPath(url, this, false);
			},
			
			// 我的消息
			jumpMessage(){
				this.$toPath('./message', this, false)
			},
			
			// 我的签到
			jumpSign(){
				this.$toPath('./sign', this, false)
			},
			
			// 积分任务
			jumpTask(){
				this.$toPath('../../subPackages/club/task', this, false)
			},
			
			// 积分抽奖
			jumpLottery(){
				this.$toPath('../../subPackages/club/lottery', this, false)
			},
			
			// 积分商城
			jumpMall(){
				this.$toPath('../../subPackages/club/mall', this, false)
			},
			
			// 订单列表
			jumpOrderList(cur){
				this.$toPath(`./order?current=${cur}`, this, false)
			},
			
			// 我的权益
			myBenefits(cur){
				this.$toPath(`../../subPackages/club/benefits?current=${cur}`, this, false)
			},
			
			// 我的钱包
			myWallet(){
				this.$toPath('../../subPackages/wallet/index', this, false)
			},
			
			// 优惠券
			myCoupon(){
				this.$toPath('../../subPackages/coupon/user', this, false)
			},
			
			// 红包
			myRedEnvelope(){
				this.$toPath('../../subPackages/redEnvelope/user', this, false)
			},
			
			//团券
			myPack(){
				
			},
			
			// 积分
			myCredit(){
				this.$toPath('./credit', this, false)
			},
			
			// 常用旅客
			guestManage(){
				this.$toPath('../../subPackages/guest/list', this, false)
			},
			
			// 我的咨询
			goQuestion(){
				this.$toPath('../../subPackages/question/list?comefrom=1', this, false)
			},
			
			// 我的游记
			goNotes(){
				this.$toPath('../../subPackages/note/user', this, false)
			},
			
			//我的旅游卡
			memberCardList(){
				this.$toPath('../../subPackages/memberCard/myCards', this, false)
			},
			
			// 我的拼团
			goPinTuan(){
				this.$toPath('../../subPackages/groupbooking/mygroups', this, false)
				// this.$toPath('../../subPackages/groups/my', this, false)
			},
			
			// 我的收藏
			goCollect(){
				this.$toPath('../../subPackages/collect/list', this, false)
			},
			
			// 常用地址
			addressList(){
				this.$toPath('../../subPackages/address/list', this, false)
			},
			
			// 常用发票
			invoiceList(){
				this.$toPath('../../subPackages/invoice/list', this, false)
			},
			
			// 商场订单列表
			mallOrderList(){
				this.$toPath('../../subPackages/club/orderList', this, false)
			},
			
			// 分销商中心
			distributionPage(){
				let path = "../../subPackages/distribution/index";
				if(!this.distribution || this.distribution.status != 1)
				{
					path = "../../subPackages/distribution/apply";
				}
				
				this.$toPath(path, this, false)
			},
			
			// 导游中心
			guideCenterPage(){
				this.$toPath("../../subPackages/guidecenter/index", this, false)
			},
			
			// 导游认证
			realguide(){
				if(this.isLogin){
					if(this.isRealname){
						uni.navigateTo({
							url:'../../subPackages/guidecenter/real'
						})
					}else{
						uni.showToast({
							icon:'none',
							title:'请先实名认证'
						})
					}
					
				}else{
					uni.showToast({
						icon:'none',
						title:'请登录'
					})
				}
			},
			
			// 实名认证
			realName(){
				let url;
				// #ifdef H5
				url = `/platforms/h5/user/realname?verifystatus=${this.userInfo.verifystatus}`
				// #endif
				
				// #ifdef MP-WEIXIN
				url = `/platforms/mp-weixin/user/realname?verifystatus=${this.userInfo.verifystatus}`
				// #endif
				
				// #ifdef MP-TOUTIAO
				url = `/platforms/mp-toutiao/user/realname?verifystatus=${this.userInfo.verifystatus}`
				// #endif
				
				// #ifdef MP-ALIPAY
				url = `/platforms/mp-alipay/user/realname?verifystatus=${this.userInfo.verifystatus}`
				// #endif
				
				// #ifdef APP-PLUS
				url = `/platforms/app-plus/user/realname?verifystatus=${this.userInfo.verifystatus}`
				// #endif
				
				this.$toPath(url, this, false);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
	
	// 背景图
	.page-container{
		/* #ifdef H5 || MP-TOUTIAO */
		padding: 24rpx 0 0;
		/* #endif */
		background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-bg.png) no-repeat top center;
		background-size: contain;
	}
	
	// 自定义头部
	.top-fixed{
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 111;
		background: #fff;
		opacity: 0;
		transition: opacity .3s;
		&.show{
			opacity: 1;
		}
		.navigation-title-bar{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 8rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			font-size: $uni-font-size-base;
		}
	}
	
	// 用户信息
	.ucenter-info-block{
		// max-height: 140rpx;
		position: relative;
		@extend .justifyspacec;
		align-items: flex-start;
		padding: 0 24rpx;
		.ucenter-integral-task{
			position: absolute;
			top: 66rpx;
			right: 0;
			z-index: 1;
			height: 60rpx;
			@extend .alignItems;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-inverse;
			padding: 0 20rpx;
			background: linear-gradient(270deg, #ff644e 0%, #ff8a2a 100%);
			border-radius: 30rpx 0 0 30rpx;
			.iconfont{
				margin-right: 6rpx;
				font-size: 12px;
			}
		}
		.ucenter-info-right{
			display: flex;
			align-items: flex-start;
			.iconfont{
				margin-left: 28rpx;
				color: #333;
				font-size: 20px;
			}
			.message{
				position: relative;
				.point{
					position: absolute;
					top: -4rpx;
					right: -4rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #f00;
				}
			}
		}
		.user-info-area{
			display: flex;
			align-items: center;
			&__hd{
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
				position: relative;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			&__bd{
				flex: 1 1 auto;
				.login-btn,
				.data{
					@extend .alignItems;
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
					margin: 0;
					padding: 0!important;
					line-height: 1;
					border: none;
					width: auto;
					text-align: left;
					background-color: transparent;
					.name{
						max-width: 170rpx;
						@extend .ellipse
					}
					.club{
						display: inline-block;
						padding: 0 10rpx 0 20rpx;
						margin-left: 30rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: #b65c35;
						line-height: 30rpx;
						border: 2rpx solid #ff8f5f;
						background-color: #ffeedb;
						border-radius: 17rpx;
						position: relative;
						vertical-align: top;
						&:after{
							content: '';
							position: absolute;
							left: -24rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 42rpx;
							height: 42rpx;
							background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-level-icon.png) no-repeat;
							background-size: contain;
						}
					}
				}
				.phone{
					margin-top: 22rpx;
					font-size: $uni-font-size-base;
					font-family: Arial;
					color: $uni-text-color-deep;
				}
			}
		}
	}
			
	.ucenter-main-wrapper{
		padding: 20rpx 24rpx
	}
	
	// 会员数据
	.member-info-block{
		min-height: 216rpx;
		// padding: 0 24rpx;
		margin-bottom: 20rpx;
		position: relative;
		.member-info-top{
			width: 716rpx;
			height: 216rpx;
			margin: 0 0 0 -7rpx;
			background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-member-bg2.png) no-repeat center;
			background-size: contain;
			.member-top-hd{
				@extend .justifyspacec;
				padding: 20rpx 28rpx 0;
				height: 48rpx;
				position: relative;
				.member-level-name{
					font-size: $uni-font-size-base;
					font-weight: bold;
					background: linear-gradient(111deg, #FFBB55 -15%, #FFF5D1 45%, #FFA755 103%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
					.level{
						font-size: 34rpx;
						font-family: Arial, Helvetica, sans-serif;
						margin-right: 12rpx;
						background: linear-gradient(111deg, #FFBB55 -15%, #FFF5D1 45%, #FFA755 103%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}
				.member-level-explain{
					font-size: 20rpx;
					font-family: Arial, Helvetica, sans-serif;
					color: #ffbe7a;
					&.tips{
						font-size: 22rpx;
					}
					.num,.iconfont{
						font-size: $uni-font-size-sm;
					}
				}
			}
			.member-top-bd{
				margin-top: 20rpx;
				height: 88rpx;
				@extend .alignJustify;
				position: relative;
				z-index: 2;
				.mtop-bd-item{
					height: 88rpx;
					flex: 1 1 auto;
					text-align: center;
					.num{
						height: 48rpx;
						line-height: 48rpx;
						font-size: 40rpx;
						color: $uni-text-color-inverse;
						font-weight: bold;
						font-family: Arial, Helvetica, sans-serif;
					}
					.txt{
						margin-top: 10rpx;
						font-size: $uni-font-size-sm;
						color: $uni-text-color-inverse;
					}
				}
			}
		}
		.member-info-bottom{
			margin-top: 28rpx;
			height: 198rpx;
			@extend .alignJustify;
			.member-bottom-item{
				height: 198rpx;
				flex: 1 1 auto;
				text-align: center;
				display: flex;
				margin-right: 18rpx;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				&:last-child{
					margin-right: 0;
				}
				&.lottery{
					background: linear-gradient(270deg, #ffada1 0%, #ff8c2d 100%);
					&:after{
						content: '';
						position: absolute;
						right: -34rpx;
						bottom: -18rpx;
						z-index: 1;
						width: 137rpx;
						height: 137rpx;
						background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-lottery-icon.png) no-repeat;
						background-size: contain;
					}
				}
				&.mall{
					background: linear-gradient(300deg, #ffbc85 1%, #ffb829 100%);
					&:after{
						content: '';
						position: absolute;
						right: -40rpx;
						bottom: -10rpx;
						z-index: 1;
						width: 135rpx;
						height: 132rpx;
						background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-mall-icon.png) no-repeat;
						background-size: contain;
					}
				}
				&.task{
					background: linear-gradient(120deg, #5be181 0%, #6cdcB5 99%);
					&:after{
						content: '';
						position: absolute;
						right: -48rpx;
						bottom: -20rpx;
						z-index: 1;
						width: 138rpx;
						height: 142rpx;
						background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-task-icon.png) no-repeat;
						background-size: contain;
					}
				}
				.title{
					position: absolute;
					left: 20rpx;
					top: 24rpx;
					z-index: 2;
					font-size: 30rpx;
					font-weight: bold;
					color: $uni-text-color-inverse;
					.iconfont{
						font-size: 36rpx;
						font-weight: normal;
						margin-right: 8rpx;
					}
				}
				.text{
					position: absolute;
					left: 20rpx;
					bottom: 20rpx;
					z-index: 2;
					font-size: $uni-font-size-base;
					color: #ffe4c4;
					.iconfont{
						font-size: 20rpx;
						margin-left: 8rpx;
					}
				}
				&.mall{
					.text{
						color: #fafad0;
					}
				}
				&.task{
					.text{
						color: #d0faec;
					}
				}
			}
		}
		// 会员卡、红包、优惠券
		.app-menu-bar{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 118rpx;
			border-radius: 20rpx;
			background-color: $uni-bg-color;
			margin-top: 20rpx;
			&__item{
				flex: 1 1 auto;
				text-align: center;
				@extend .alignJustify;
				position: relative;
				height: 118rpx;
				&.litle{
					@extend .directionColumn;
					.icon{
						// width: 32rpx;
						// height: 22rpx;
						@extend .justifyspacec;
						&:after{
							width: 36rpx;
							height: 10rpx;
							left: -2rpx;
							transform: translateX(0);
						}
						.bg{
							width: 32rpx;
							height: 22rpx;
						}
						.name{
							color: $uni-text-color-grey;
							font-size: $uni-font-size-sm;
							margin-left: 6rpx;
						}
					}
					.info{
						margin-left: 0;
					}
				}
				.icon{
					// width: 58rpx;
					// height: 43rpx;
					position: relative;
					&:after{
						content: '';
						position: absolute;
						bottom: -3rpx;
						left: 50%;
						z-index: 1;
						transform: translateX(-50%);
						width: 64rpx;
						height: 16rpx;
						border-radius: 24rpx;
						background-color: #ECE7D7;
						filter: blur(8rpx);
					}
					.bg{
						width: 58rpx;
						height: 43rpx;
						position: relative;
						z-index: 2;
						&.mcard{
							background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-icon-mcard.png) no-repeat center;
							background-size: contain;
						}
						&.coupon{
							background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-icon-coupon.png) no-repeat center;
							background-size: contain;
						}
						&.redbag{
							background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-icon-redbag.png) no-repeat center;
							background-size: contain;
						}
						&.pack{
							background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-center-icon-pack.png) no-repeat center;
							background-size: contain;
						}
					}
				}
				.info{
					margin-left: 30rpx;
					.name{
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm;
					}
					.num{
						font-size: $uni-font-size-base;
						font-family: Arial, Helvetica, sans-serif;
						font-weight: bold;
						margin-top: 4rpx;
						.iconfont{
							color: $uni-text-color-grey;
							font-size:20rpx;
							margin-left: 6rpx;
						}
					}
				}
			}
		}
	}
		
	/* 模块 */
	.module-view-block{
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background: $uni-bg-color;
		&:last-child{
			margin-bottom: 0;
		}
		.module-title-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			position: relative;
			.title{
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
			.more{
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm;
				.iconfont{
					font-size: 26rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
	
	/* 我的订单 */
	.order-state-group{
		display: flex;
		justify-content: space-between;
		align-items: top;
		padding: 8rpx 0 28rpx;
		.item{
			width: 20%;
			text-align: center;
			position: relative;
			.icon{
				display: inline-block;
				width: 92rpx;
				height: 92rpx;
				&.unconfirmed{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-order-icon01.png) no-repeat;
					background-size: contain;
				}
				&.unpaid{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-order-icon02.png) no-repeat;
					background-size: contain;
				}
				&.unconsumed{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-order-icon03.png) no-repeat;
					background-size: contain;
				}
				&.uncommented{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-order-icon04.png) no-repeat;
					background-size: contain;
				}
				&.refund{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-order-icon05.png) no-repeat;
					background-size: contain;
				}
			}
			.name{
				font-size: 24rpx;
				font-weight: bold;
			}
			.point{
				position: absolute;
				top: 12rpx;
				right: 38rpx;
				min-width: 28rpx;
				font-size: 22rpx;
				color: #fff;
				text-align: center;
				height: 28rpx;
				line-height: 28rpx;
				background-color: #ff4b47;
				border-radius: 14rpx;
			}
		}
	}
	
	/* 分销商 */
	.distributor-entry-area,
	.guide-entry-area{
		display: flex;
		align-items: center;
		padding: 0 20rpx 20rpx;
		.hd{
			flex: 0 0 auto;
			width: 100rpx;
			height: 110rpx
		}
		.bd{
			flex: 1 1 auto;
			margin-left: 20rpx;
			.tit{
				display: block;
				font-size: $uni-font-size-base;
				font-weight: bold;
			}
			.sub{
				color: $uni-text-color-grey;
				display: block;
				/* #ifdef H5 */
				width: 200%;
				margin-top: -20rpx;
				transform: scale(.5);
				transform-origin: left bottom;
				font-size: 40rpx;
				/* #endif */
				/* #ifndef H5 */
				margin-top: 6rpx;
				font-size: $uni-font-size-sm;
				/* #endif */
				.tips{
					color: #ff4b47;
				}
			}
		}
		.fd{
			flex: 0 0 auto;
			.btn{
				font-size: $uni-font-size-base;
				padding: 12rpx 24rpx;
				border: 2rpx solid #ff8a2a;
				border-radius: 60rpx;
				font-size: $uni-font-size-sm;
				background: linear-gradient(90deg, #ff644e 0%, #ff8a2a 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}	
	.guide-entry-area .hd{
		height: 100rpx;
	}
		
	/* 常用功能 */
	.tools-view-group{
		display: flex;
		flex-wrap: wrap;
		padding: 8rpx 0 0;
		&__item{
			display: block;
			background: transparent;
			margin: 0;
			width: 25%;
			padding: 0 0 28rpx;
			text-align: center;
			position: relative;
			.toutiao-btn{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				opacity: 0;
			}
			.icon{
				display: block;
				width: 92rpx;
				height: 92rpx;
				margin: 0 auto;
				&.ping{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon01.png) no-repeat;
					background-size: contain;
				}
				&.note{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon02.png) no-repeat;
					background-size: contain;
				}
				&.collected{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon03.png) no-repeat;
					background-size: contain;
				}
				&.jieban{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon04.png) no-repeat;
					background-size: contain;
				}
				&.qustion{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon05.png) no-repeat;
					background-size: contain;
				}
				&.tour{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon06.png) no-repeat;
					background-size: contain;
				}
				&.address{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon07.png) no-repeat;
					background-size: contain;
				}
				&.invoice{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon08.png) no-repeat;
					background-size: contain;
				}
				&.seek{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon09.png) no-repeat;
					background-size: contain;
				}
				&.guide{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon10.png) no-repeat;
					background-size: contain;
				}
				&.guideSetting{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon11.png) no-repeat;
					background-size: contain;
				}
				&.award{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon12.png) no-repeat;
					background-size: contain;
				}
				&.toutiao{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon13.png) no-repeat;
					background-size: contain;
				}
				&.realname{
					background: url(https://static.member.stourweb.cn/uniapp/static/images/uni-cms-tool-icon14.png) no-repeat;
					background-size: contain;
				}
			}
			.name{
				color: #333;
				display: block;
				font-size: $uni-font-size-sm;
			}
		}
	}
			
</style>
